<template>
  <div class="tts-container">
    <div class="nav-bar"></div>
    <div class="box">
      <div class="setting-panel">
        <div class="voice-actor-panel">
          <div class="voice-actor-avatar-box">
            <img src="@/assets/avatar/man.png">
          </div>
          <div class="voice-actor-info">
            <p style="font-size: 16px;font-weight: 510">配音男1</p>
            <p style="font-size: 12px;color: #989898">音色描述</p>
          </div>
          <div class="change-voice-btn">
            <el-button size="small" plain color="#626aef">更换</el-button>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="emotion-panel">
          <div class="emotion-option" v-for=" item in 10">
            <div class="emotion-option-icon">
              默
            </div>
            <p>默认</p>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="slider-bar" >
          <div class="slider-bar-label">
            <span>语速：</span>
            <el-input-number v-model="speed"  :min="-10" :max="10"  size="small"/>
          </div>
          <cus-slider v-model="speed" :min="-10" :max="10" />
        </div>
        <div class="slider-bar" >
          <div class="slider-bar-label">
            <span>语调：</span>
            <el-input-number v-model="intonation"  :min="-10" :max="10"  size="small"/>
          </div>
          <cus-slider v-model="intonation" :min="-10" :max="10" />
        </div>
        <div class="slider-bar" >
          <div class="slider-bar-label">
            <span>音量：</span>
            <el-input-number v-model="volume"  :min="0" :max="10"  size="small"/>
          </div>
          <cus-slider v-model="volume" :min="0" :max="10" />
        </div>
      </div>
      <div class="major-box">
        <div>
          <el-input
              v-model="copywriting"
              :rows="24"
              type="textarea"
              resize='none'
              placeholder="请输入需要配音的文案,选择想要的音色,点击试听合成即可生成配音音频"
          />
        </div>
        <div></div>
      </div>
    </div>

  </div>
</template>
<script setup>
import {ref} from 'vue'
import CusSlider from "@/components/Cus-Slider/cus-slider.vue";

const speed = ref(0)
const intonation = ref(0)
const volume = ref(0)

const copywriting = ref('')

let mask = ref([
  {value:-10 , label:'-10'},
  {value:10 , label:'10'},
])

</script>
<style scoped>
.tts-container {
  height: 100%;
  width: 100%;
  background: #f6f6f6;

}

.nav-bar {
  height: 80px;
  width: 100%;
  background-color: #fff;

}

.box {
  height: calc(100% - 80px);
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 10px 20px 10px 20px;
  justify-content: space-between;
}

.setting-panel {
  width: 300px;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cfcdcd;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
}

.voice-actor-panel {
  display: flex;
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  padding: 0px 5px 0px 5px;
}

.el-divider {
  margin: 10px 0px;
}

.voice-actor-avatar-box {
  height: 50px;
  width: 50px;
  margin: auto 0px;
  border-radius: 50%;
  overflow: hidden;
}

.voice-actor-info {
  width: calc(100% - 50px - 50px);

}

.voice-actor-info p {
  margin: 0px;
  text-align: left;
  box-sizing: border-box;
  padding: 3px 10px 3px 10px;
}


.change-voice-btn {
  display: flex;
  align-items: center;
  width: 50px;
  justify-items: center
}

img {
  width: 100%;
  height: 100%;
}

.emotion-panel {
  height: auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0px 10px 0px 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 创建三列，每列等宽 */
  gap: 10px; /* 可选，设置网格之间的间隙 */
}

.emotion-option {
  flex: 1 1 25%; /* 这将使每个元素占据大约1/3的宽度 */
  box-sizing: border-box; /* 包括padding和border在内的总宽度 */
  height: 80px;
  //background-color: #25a3e4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  padding: 5px 0px 5px 0px;
}

.emotion-option-icon {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  font-size: 18px;
  background-color: #646cff;
  align-items: center;
  display: flex;
  justify-content: center;
  color: #fff;
}

.emotion-option p {
  font-size: 14px;
  display: flex;
  justify-content: center;
}

.slider-bar {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 10px 0px 10px;
  margin-top: 20px;
}

.slider-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
}

.major-box{
  height: 100%;
  width: calc(100% - 320px);
  background-color: #fff;
  box-shadow:  0px 5px 10px #cfcdcd;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
}

</style>